/**
 * Created by Administrator on 2016/9/2.
 */
/**
 * Created by Administrator on 2016/8/31.
 */
var treeroot = document.getElementById("root");
var btns = document.getElementsByTagName('input');
var myDiv = document.getElementsByTagName("div");
var nodeList = [];
var timer = null;
var looptimer = null;
var BFindex = 0;
var flag = false;
var target = null;

//深度优先遍历
function traverseDf(node){
    if(node){
        nodeList.push(node);
        for(var i = 0;i<node.children.length;i++){
            traverseDf(node.children[i]);
        }
    }
    return nodeList;
}

//广度优先遍历
function traverseBf(node) {
    if (node) {
        nodeList.push(node);
        traverseBf(node.nextElementSibling);
        node = nodeList[BFindex++];
        traverseBf(node.firstElementChild);
    }
}

//遍历动画形式
function nodeshow(){
    var len = nodeList.length;
//    alert(len)
    var i = 0;
    timer = setInterval(function(){
        if(i == len){
            clearInterval(timer);
            flag = false;
            nodeList[len-1].style.backgroundColor = 'white';
        }else if(i < len && i != 0){
            nodeList[i].style.backgroundColor = 'blue';
            nodeList[i-1].style.backgroundColor = "white";
            flag = true;
        }else if(i == 0){
            nodeList[i].style.backgroundColor = 'blue';
            flag = true;
        }
        i++;
    },500);
}
//字符匹配动画
function Search(){
    var value = btns[2].value;
    var len = nodeList.length;
    var i = 0;
    looptimer = setInterval(function(){
        if(i == len){
            clearInterval(looptimer);
            nodeList[len-1].style.backgroundColor = 'white';
            flag = false;
            alert("没有匹配的字符");
        }else if(nodeList[i].firstChild.nodeValue.trim() != value){
            if(i < len && i != 0){
                nodeList[i].style.backgroundColor = 'blue';
                nodeList[i-1].style.backgroundColor = "white";
                flag = true;
            }else if(i == 0){
                nodeList[i].style.backgroundColor = 'blue';
                flag = true;
            }
        } else if(nodeList[i].firstChild.nodeValue.trim() == value){
            clearInterval(looptimer);
            flag = false;
            nodeList[i].style.backgroundColor = 'red';
            if(i != 0){
                nodeList[i-1].style.backgroundColor = "white";
            }
        }
        i++;
    },500);

}

//重置各个节点背景颜色为白色
function resetColor(){
    for(var i = 0; i < myDiv.length;i++){
        myDiv[i].style.backgroundColor = "white";
//        alert("d")
    }
}

//删除选中节点及其所有子节点
function delNode(){
if(target == null){
    alert("请选中要删除的节点");
}else{
    target.parentNode.removeChild(target);
    target = null;
    }

}

//添加节点到指定位置
function addNode(){
    if(target == null){
        alert("请选中要添加节点的位置");
    }else{
        var newNode = document.createElement("div");
        newNode.innerText = btns[6].value;
        target.appendChild(newNode);
    }
}
//为按钮绑定监听事件
function init(){
//    alert('asd')
    btns[0].onclick = function(){
        if(!flag){
            nodeList = [];
            traverseDf(treeroot);
            resetColor();
            nodeshow(NodeList);

        }else{
            alert("正在遍历中");
        }

    };
    btns[1].onclick = function(){

        if(!flag){
            BFindex = 0;
            nodeList = [];
//            var NodeList = [];
            traverseBf(treeroot);
            resetColor();
            nodeshow();

        }else{
            alert("正在遍历中");
        }

    };
    btns[3].onclick = function(){
        if(!flag){
            nodeList = [];
            traverseDf(treeroot);
            resetColor();
            Search();
//            nodeList = [];
        }else{
            alert("正在遍历中");
        }

    };
    btns[4].onclick = function(){
        if(!flag){
            BFindex = 0;
            nodeList = [];
            traverseBf(treeroot);
            resetColor();
            Search();
        }else{
            alert("正在遍历中");
        }

    };
    for(var i = 0;i<myDiv.length;i++){
        myDiv[i].onclick = function(e){
            resetColor();
            this.style.backgroundColor = "pink";
            e.stopPropagation();
            target = this;
//            delNode();
        }
    }
    btns[5].onclick = delNode;
    btns[7].onclick = addNode;
}
init();